<template>
  <wit-content>
    <wit-custom :isBack="true">
      <template v-slot:content>
        <text>Layout</text>
      </template>
      <template v-slot:left>
        <text class="icon-weixin font-size-xl"></text>
      </template>
    </wit-custom>
    <view class="content">
      <view class="margin-bottom-sm">通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。</view>
      <wit-row justify="start" style="background: #00d2ff">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
      </wit-row>
      <wit-row justify="center" style="margin-top: 10px;background: #00d2ff ">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
      </wit-row>
      <wit-row justify="end" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
      </wit-row>
      <wit-row justify="between" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
      </wit-row>
      <wit-row justify="around" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
      </wit-row>

      <view class="margin-sm">通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。</view>
      <wit-row style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="24">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
      </wit-row>
      <wit-row style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="12">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="12">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
      </wit-row>
      <wit-row style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">4</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">5</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">6</view>
        </wit-col>
      </wit-row>
      <wit-row style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">4</view>
        </wit-col>
      </wit-row>
      <wit-row style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">4</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">5</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">6</view>
        </wit-col>
      </wit-row>

      <view class="margin-ms">提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。</view>
      <wit-row :gutter="20" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
        <wit-col :span="6">
          <view  style="background: linear-gradient(135deg,#fce38a,#f38181)">4</view>
        </wit-col>
      </wit-row>

      <view class="margin-sm">通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。</view>
      <wit-row :gutter="5" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="16">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
      </wit-row>
      <wit-row :gutter="10" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="8">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">4</view>
        </wit-col>
      </wit-row>
      <wit-row :gutter="5" style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="16">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
        <wit-col :span="4">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">3</view>
        </wit-col>
      </wit-row>
      <view class="margin-sm">通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。</view>
      <wit-row :gutter="20">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6" :offset="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
      </wit-row>
      <wit-row :gutter="20">
        <wit-col :span="6" :offset="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
        <wit-col :span="6" :offset="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">2</view>
        </wit-col>
      </wit-row>
      <wit-row :gutter="20">
        <wit-col :span="12" :offset="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181)">1</view>
        </wit-col>
      </wit-row>
      <view>第行固定个数，多余换行显示</view>
      <wit-row :gutter="5" warp style="margin-top: 10px;background: #00d2ff">
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">1</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">2</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">3</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">4</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">5</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">6</view>
        </wit-col>
        <wit-col :span="6">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">7</view>
        </wit-col>
      </wit-row>
      <view>响应式布局 五个响应尺寸：xs、sm、md、lg 和 xl。</view>
      <wit-row :gutter="10" style="margin-top: 10px;background: #00d2ff">
        <wit-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">1</view>
        </wit-col>
        <wit-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">2</view>
        </wit-col>
        <wit-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">3</view>
        </wit-col>
        <wit-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <view style="background: linear-gradient(135deg,#fce38a,#f38181);">4</view>
        </wit-col>
      </wit-row>
    </view>
    <wit-tabBar></wit-tabBar>
  </wit-content>
</template>

<script setup lang="ts">
// import { themeStore } from '@/store/pinia/modules/theme'
// const { storeColor } = themeStore
</script>